<template>
	<view class="">
		<view class="example ">
			<view class="">
				<p class="gray_font titleTips">
					此信息仅您和医生可见。
					<br />
					为准确的医疗服务，请您务必填写真实资料。
					<br />
					一旦信息建立，无法删除，请确认无误后提交
				</p>
			</view>
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<view class="formInfo pad30">
					<uni-forms-item label="真实姓名" required name="name">
						<uni-easyinput v-model="valiFormData.name" :inputBorder="false" :disabled="isDisabled"
							placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="身份证号" required name="idCard">
						<uni-easyinput type="idcard" v-model="valiFormData.idCard" :inputBorder="false" :disabled="isDisabled"
							placeholder="请输入身份证号" @blur="isIdCard" />
					</uni-forms-item>
				</view>

				<view class="formInfo pad30">
					<uni-forms-item label="手机号" required name="phone">
						<uni-easyinput type="number" v-model="valiFormData.phone" :inputBorder="false" placeholder="请输入手机号" />
					</uni-forms-item>
					<uni-forms-item label="验证码" required name="verifyCode">
						<view class="" style="margin-top:16rpx;margin-left:18rpx;">
							<input style="width:60%;float: left;" type="text" value=""
								v-model="valiFormData.verifyCode" :inputBorder="false" placeholder="填写验证码" />
							<text class="sendCode" @click.stop="getMessageCode">
								{{ getCodeText || '发送验证码' }}
							</text>
						</view>
					</uni-forms-item>
				</view>
				<view class="formInfo pad30">
					<uni-forms-item required label="家庭住址" name="permanentAddress">
						<view class="ui-list right" style="padding-left: 6px; padding-top:9px">
							<view class="input" type="text" placeholder="">
								<picker mode="multiSelector" range-key="title" :range="newProvinceDataList"
									:value="multiIndex" @change="pickerChange('permanentAddress',$event.detail.value)"
									@columnchange="pickerColumnchange" >
									<view class="picker">
										{{valiFormData.permanentAddress ? valiFormData.permanentAddress :'请选择家庭住址'}}
									</view>
								</picker>
							</view>
						</view>
					</uni-forms-item>
				</view>
				<view class="formInfo pad30">
					<uni-forms-item label="关系" name="relation">
						<picker mode="selector" range-key="dictLabel" :value="relationId" :range="relationList"
							v-model="valiFormData.relation" @change="changeRelation('relation', $event.detail.value)">
							<view class="picker" style="margin-top:16rpx;margin-left:18rpx;">
								{{ valiFormData.relation ? relationValue : '请选择关系' }}
							</view>
						</picker>
					</uni-forms-item>
				</view>
			</uni-forms>
			<p class="gray_font" style="font-size:25rpx; padding: 10rpx 0 0 30rpx;"> 与就诊人关系可修改</p>
			<button :disabled="extraction" class="arc_button btn_appointment" type="primary"
				@click="submit('valiForm')">
				保存
			</button>
		</view>
	</view>
</template>

<script>
	import address from '@/static/json/allAddress.json';
	import {
		addPatient,
		patientDetail,
		getCode
	} from '@/api/my.js';
	import {
		getDicts
	} from '@/api/common.js';
	export default {
		data() {
			return {
				extraction:false,
				isDisabled:false,
				patientId: 0, //就诊人id
				getCodeText: '发送验证码',
				disabled: false,
				time: 60,
				valiFormData: {
					name: '',
					idCard: '',
					phone: '',
					verifyCode: '',
					relation: 0,
					permanentAddress: '',

				},
				relationList: [], //关系列表
				relationId: 0,
				relationValue: '', //
				sexId: 0,
				sexValue: '', //男女
				// oldpProvinceDataList: address,
				newProvinceDataList: [
					[],
					[],
					[]
				],
				address: [], // 
				select: '',
				multiIndex: [0, 0, 0], //省市区下标
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					idCard: {
						rules: [{
							required: true,
							errorMessage: '身份证号不能为空'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}]
					},
					verifyCode: {
						rules: [{
							required: true,
							errorMessage: '验证码不能为空'
						}]
					},
					permanentAddress: {
					    rules: [
					        {
					            required: true,
					            errorMessage: '家庭住址不能为空'
					        }
					    ]
					}
				}
			};
		},
		onLoad(option) {
			console.log("^^^^^^哈哈哈", option.patientId)
			if (option) {
				this.patientId = Number(option.patientId);
			}
			// 获取关系字典
			this.getRelation();
			// 查询就诊人个人信息
			this.getPatientDetail();
			// this.valiFormData.birthTime = this.date;
			for (let i = 0; i < address.length; i++) {
				this.newProvinceDataList[0].push({
					title: address[i].title,
					id: address[i].id
				})
			}
			for (let i = 0; i < address[0].children.length; i++) {
				this.newProvinceDataList[1].push({
					title: address[0].children[i].title,
					id: address[0].children[i].id
				})
			}
			for (let i = 0; i < address[0].children[0].children.length; i++) {
				this.newProvinceDataList[2].push({
					title: address[0].children[0].children[i].title,
					id: address[0].children[0].children[i].id
				});
			}
		},
		methods: {

			// 省市区确认事件
			pickerChange(name, value) {
				this.multiIndex = value;
				this.$refs.valiForm.setValue(name, value);
				// console.log(this.multiIndex, '999----')
				// 数组内的下标
				// console.log(this.multiIndex);
				// 获取省
				// console.log(this.newProvinceDataList[0][this.multiIndex[0]], this.newProvinceDataList[1][this.multiIndex[1]], 
				// 'this.newProvinceDataList[0]999---选中的id')
				// 获取市
				// console.log(this.newProvinceDataList[1][this.multiIndex[1]])
				// 获取区
				// console.log(this.newProvinceDataList[2][this.multiIndex[2]])
				// 省市区名称
				this.select =
					`${this.newProvinceDataList[0][this.multiIndex[0]].title},${this.newProvinceDataList[1][this.multiIndex[1]].title},${this.newProvinceDataList[2][this.multiIndex[2]].title}`
			
				this.valiFormData.permanentAddress = this.select;
				console.log(this.select, this.valiFormData.permanentAddress, '999---->>>')
				// 获取到省市区id
				this.valiFormData.province = this.newProvinceDataList[0][this.multiIndex[0]].id
				this.valiFormData.city = this.newProvinceDataList[1][this.multiIndex[1]].id; //市id
				this.valiFormData.district = this.newProvinceDataList[2][this.multiIndex[2]].id; //区id
			},
			pickerColumnchange(e) {
				// this.multiIndex = [0,0,0];
				// 第几列滑动
				// console.log(e.detail.column);
				// 第几列滑动的下标
				// console.log(e.detail.value)
				// 第一列滑动
				if (e.detail.column === 0) {
					this.multiIndex[0] = e.detail.value
					// console.log('第一列滑动');
					// this.newProvinceDataList[1] = [];
					this.newProvinceDataList[1] = address[this.multiIndex[0]].children.map((
						item, index) => {
						// console.log(item,'item1111--->')
						return item
					})
					// console.log(this.multiIndex)
					if (address[this.multiIndex[0]].children.length === 1) {
						this.newProvinceDataList[2] = address[this.multiIndex[0]].children[0]
							.children.map((item,
								index) => {
								// console.log(item,'ite111222--->>>')
								return item
							})
					} else {
						this.newProvinceDataList[2] = address[this.multiIndex[0]].children[
							this.multiIndex[
								1]].children.map((item, index) => {
							// console.log(item,'ite111333---->>>')
							return item
						})
					}
					// 第一列滑动  第二列 和第三列 都变为第一个
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
				}
				// 第二列滑动
				if (e.detail.column === 1) {
					this.multiIndex[1] = e.detail.value
					// console.log('第二列滑动');
					// console.log(this.multiIndex)
					this.newProvinceDataList[2] = address[this.multiIndex[0]].children[this
							.multiIndex[1]]
						.children.map((item, index) => {
							// console.log(item,999,'第二列华东的item')
							return item
						})
					// 第二列 滑动 第三列 变成第一个
					this.multiIndex.splice(2, 1, 0)
				}
				// 第三列滑动
				if (e.detail.column === 2) {
					this.multiIndex[2] = e.detail.value
					// console.log('第三列滑动')
					// console.log(this.multiIndex)
				}
				// if (this.edit) {
				// 	this.clearHospital();
				// 	this.clearDepartment();
				// }
				// console.log(this.multiIndex, '数组id')
			},
			
			getPatientDetail() {
				uni.showLoading({
					title: '加载中'
				});
				// 查询就诊人信息
				patientDetail(this.patientId)
					.then(res => {
						this.valiFormData = res.data;
						this.relationValue = res.data.relation;
						this.valiFormData.id = res.data.patientId;
						if (res.data.isVerified == 1) { //1--未实名  0--实名
							this.isDisabled = false
						} else {
							this.isDisabled = true;
						}
						// 省的下标
						address.map((item, index) => {
							if (item.id == res.data.province) {
								this.multiIndex[0] = index;
								// 市的下标
								address[this.multiIndex[0]].children.map((item, index1) => {
									if (item.id == res.data.city) {
										this.multiIndex[1] = index1;
										if (this.multiIndex[0] != 0) {
											// 第一列下标不是0 的话要重新组装新的数组 ，，根据第一列id 组装第二列数据和第三列数据
											this.newProvinceDataList[1] = address[
												this.multiIndex[0]].children.map((item, index) => {
												return item
											})
											this.newProvinceDataList[2] = address[
													this.multiIndex[0]].children[this.multiIndex[1]]
												.children.map((item, index) => {
												return item
											})
											// console.log(this.newProvinceDataList[1], this
											// 	.newProvinceDataList[2], '是是是999-----')
										}
										// 区的下标
										address[this.multiIndex[0]].children[this
											.multiIndex[1]].children.map((item, index2) => {
											if (item.id == res.data.district) {
												this.multiIndex[2] = index2;
												return this.multiIndex[2];
											}
										})
										return this.multiIndex[1];
									}
								})
								return this.multiIndex[0];
							}
						})
						this.multiIndex = [this.multiIndex[0], this.multiIndex[1], this.multiIndex[2]];
						console.log(this.valiFormData, this.multiIndex,'要渲染的数据000--')
						uni.hideLoading();
					})
					.catch(err => {
						uni.hideLoading();
						uni.showToast({
							title: err,
							icon: 'none',
							duration: 3000
						});
					});
			},
			// 获取关系数据
			getRelation() {
				uni.showLoading({
					title: '加载中'
				});
				// 查询关系字典
				getDicts({
						dictType: 'xy_relation_type'
					})
					.then(res => {
						console.log(res, '字典关系9--');
						this.relationList = res.data;
						uni.hideLoading();
					})
					.catch(err => {
						uni.hideLoading();
						uni.showToast({
							title: err,
							icon: 'none',
							duration: 3000
						});
					});
			},
			changeRelation(name, value) {
				this.$refs.valiForm.setValue(name, value);
				this.valiFormData.relation = this.relationList[value].dictValue;
				this.relationValue = this.relationList[value].dictLabel;
			},
			// 校验身份证
			isIdCard(card) {
				// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
				var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if (reg.test(card.target.value) === false) {
					// alert("身份证输入不合法");
					this.$util.Tips({
						title: '身份证输入不合法'
					});
					return false;
				}
			},
			// 获取验证码
			getMessageCode() {
				let _this = this;
				if (!_this.valiFormData.phone) {
					return _this.$util.Tips({
						title: '请填写手机号码',
						icon: 'none',
						duration: 3000
					});
				}
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(_this.valiFormData.phone)) {
					return _this.$util.Tips({
						title: '请输入正确的手机号码',
						icon: 'none',
						duration: 3000
					});
				}
				uni.showLoading({
					title: '加载中'
				});
				getCode({
						phone: _this.valiFormData.phone,
						messageType: 'patient'
					})
					.then(res => {
						console.log(res, '9999验证码res');
						if (res.code == 200) {
							_this.setTime();
						}
						uni.showToast({
							title: res.msg,
							duration: 3000
						});
						uni.hideLoading();
					})
					.catch(err => {
						uni.hideLoading();
						console.log(err, '获取验证码err');
						uni.showToast({
							title: err,
							icon: 'none',
							duration: 3000
						});
					});
			},
			setTime() {
				let _this = this;
				if (_this.time == 0) {
					_this.time = 60;
					_this.getCodeText = `获取验证码`;
					_this.disabled = false;
				} else {
					_this.disabled = true;
					_this.getCodeText = `重新发送(${_this.time}s)`;
					_this.time--;
					setTimeout(function() {
						_this.setTime();
					}, 1000);
				}
			},

			submit(ref) {
				this.$refs[ref].validate(valid => {
					if (valid == null) {
						this.extraction=true;
						uni.showLoading({
							title: '加载中'
						});
						this.valiFormData.messageType= 'patient';
						// console.log(this.valiFormData, '编辑就诊人的参数000')
						// return

						addPatient(this.valiFormData)
							.then(res => {
								uni.hideLoading();
								if (res.code == 200) {
									uni.navigateBack({
										delta: 1
									})
									this.extraction=false;
								}
							})
							.catch(err => {
								uni.hideLoading();
								uni.showToast({
									title: err,
									icon: 'none',
									duration: 3000
								});
								this.extraction=false;
							});
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	/deep/.uni-forms-item__label.data-v-61dfc0d0 {
		width: 170rpx !important;
	}

	/deep/.uni-forms-item__label .label-text.data-v-61dfc0d0 {
		font-size: 32rpx;
		color: #333;
	}

	/deep/.uni-easyinput__content-input.data-v-abe12412 {
		font-size: 31rpx;
	}
	/deep/.uni-forms-item__content.data-v-61dfc0d0{
		font-size: 31rpx;
	}
	.titleTips {
		font-size: 25rpx;
		line-height: 34rpx;
		padding: 30rpx;
	}

	.formInfo {
		background-color: #ffffff;
		margin-bottom: 10rpx;
		padding: 30rpx 30rpx 0;
	}

	.sendCode {
		color: #4cd964;
		cursor: pointer;
		font-size: 29rpx;
	}

	.btn_appointment {
		background: -webkit-linear-gradient(#77E2A4, #4CCDBC);
		color: #FFFFFF;
		margin-top: 80rpx;
	}
</style>
